<template>
  <el-form
    ref="formRef"
    :layout="formLayout"
    :model="formState"
    :rules="formRules"
    class="qms-form"
  >
    <el-row :gutter="28" type="flex">
      <el-col v-for="item in formItems" :key="item.value" :span="colSpan">
        <el-form-item :label="item.label[locale]" :name="item.value">
          <slot :name="item.value">
            <component
              :is="formComponents[item.component]"
              v-model:value="formState[item.value]"
              v-model:checked="formState[item.value]"
              v-bind="{ ...item.parameter }"
            />
          </slot>
        </el-form-item>
      </el-col>
      <el-col :span="colSpan">
        <slot name="operation" >
          <div class="qms-search-action">
            <el-button type="primary" @click="submitForm">{{t('searchButtonText')}}</el-button>
            <el-button @click="resetForm">{{t('resetButtonText')}}</el-button>
            <slot name="addOperation"></slot>
          </div>
        </slot>
      </el-col>
    </el-row>
  </el-form>
</template>
<script setup lang="ts">
import { ref, defineProps, markRaw, defineEmits } from "vue"
import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
import { formComponents } from '@/utils/formComponents'
import { useI18n } from 'vue-i18n'
const { t,locale } = useI18n({})

interface FormItems {
  label: string
  value: string
  component?: string
  parameter?: Object
}
interface Props {
  formName?: string
  formLayout?: string
  formRules?: object
  colSpan?: number
  formState: object
  formItems: FormItems[]
}
const props = withDefaults(defineProps<Props>(), {
  formName: 'searchForm',
  formLayout: 'vertical',
  formRules: undefined,
  colSpan: 6,
})
const emits = defineEmits(['submit'])
const formRef = ref()
const resetForm = () => {
  formRef.value.resetFields()
}
const submitForm = () =>{
  formRef.value
    .validate()
    .then(() => {
      emits('submit')
    })
    .catch((error: ValidateErrorEntity) => {
      console.log('error', error);
    });
}
</script>
<style lang="less">
.qms-form {
  width:100%;
  background: #fff;
  padding: 24px;
  margin-bottom: 20px;
  .qms-search-action{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding-top: 32px;
    button{
      flex:1;
      margin-right:24px;
    }
  }
}
</style>